<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-form ref="queryForm" inline size="small" :model="queryForm">
          <el-form-item label="姓名" prop="name">
            <el-input placeholder="请输入学生姓名" v-model="queryForm.name"></el-input>
          </el-form-item>
          <el-form-item label="学号" prop="studentNumber">
            <el-input placeholder="请输入学号" v-model="queryForm.studentNumber"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard">
            <el-input placeholder="请输入学生身份证号" v-model="queryForm.idcard"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input placeholder="请输入学生手机号" v-model="queryForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.birthday" placeholder="请输入学生入学日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="入学日期" prop="entryDate">
            <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.entryDate" placeholder="请输入学生入学日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="所属班级" prop="classId">
            <my-cascader v-model="queryForm.classId" :options="classTreeList" :level="3"></my-cascader>
          </el-form-item>
          <el-button icon="el-icon-search" size="small" type="primary" @click="onClickSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="small" @click="resetQueryForm">重置</el-button>
        </el-form>
      </el-row>
      <el-row v-permission="['admin']">
        <el-button icon="el-icon-plus" size="small" type="primary" plain @click="onClickAdd">新增</el-button>
        <el-button icon="el-icon-edit" size="small" type="success" plain @click="onClickEdit()" :disabled="editDisabled">
          修改
        </el-button>
        <el-button icon="el-icon-edit" size="small" type="danger" plain>删除</el-button>
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
        >导入</el-button>
      </el-row>
    </el-card>
    <el-table
      v-loading="loading"
      :data="list"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="ID" width="95" prop="id"></el-table-column>
      <el-table-column label="姓名" prop="name" width="100"></el-table-column>
      <el-table-column label="学号" prop="studentNumber" width="120"></el-table-column>
      <el-table-column label="身份证号" prop="idcard" width="180"></el-table-column>
      <el-table-column label="手机号" prop="mobile" width="120"></el-table-column>
      <el-table-column label="出生日期" prop="birthday" width="120"></el-table-column>
      <el-table-column label="入学日期" prop="entryDate" width="120"></el-table-column>
      <el-table-column label="所属班级" prop="eduClass.name" width="300"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
<!--          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
          <el-button type="text" size="small" @click="handleEdit(scope.row.id)" v-permission="['admin']">编辑</el-button>
          <el-button type="text" size="small" @click="resetPassword(scope.row.id)">重置密码</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row.id)" v-permission="['admin']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-drawer
      :title="drawer.title"
      :visible.sync="drawer.show"
      :before-close="onDrawerClose"
      size="50%">
      <el-form :rules="formRules" ref="editForm" label-width="auto" :model="form" size="medium">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="idcard">
              <el-input v-model="form.idcard" placeholder="请输入学生身份证号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入学生手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="form.birthday" placeholder="请输入学生出生日期"></el-date-picker>
        </el-form-item>-->
        <el-form-item label="入学日期" prop="entryDate">
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="form.entryDate" placeholder="请输入学生入学日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="所属班级" prop="classId">
          <my-cascader v-model="form.classId" :options="classTreeList" :level="3"></my-cascader>
        </el-form-item>
      </el-form>
      <div class="form-drawer-footer">
        <el-button @click="onDrawerClose">取 消</el-button>
        <el-button type="primary" @click="onDrawerConfirm" :loading="drawer.confirmLoading">{{ drawer.confirmLoading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </el-drawer>

    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getStudentList, addStudent, updateStudent, getOneStudent, deleteOneStudent, resetStudentPassword} from "@/api/student";
import List from "@/mixins/list";
import MyCascader from "@/components/MyCascader";
import {getClassTreeList} from "@/api/dept";

import StudentValidator from "@/validator/StudentValidator";

export default {
  components: {MyCascader},
  data() {
    return {
      queryListFun: getStudentList,
      addFun: addStudent,
      updateFun: updateStudent,
      queryOneFun: getOneStudent,
      deleteOneFun: deleteOneStudent,
      validator: StudentValidator,
      queryForm: {
        name: '',
        studentNumber: '',
        idcard: '',
        mobile: '',
        birthday: '',
        entryDate: '',
        classId: null
      },
      form: {
        name: '',
        idcard: '',
        mobile: '',
        entryDate: '',
        classId: null
      },
      name: '学生',
      classTreeList: []
    }
  },
  mixins: [
    List
  ],
  mounted() {
    getClassTreeList().then(res => {
      const classTreeList = []
      for (let i of res.data) {
        const children = []
        for (let j of i.majors) {
          const classChildren = []
          for(let k of j.classes) {
            classChildren.push({
              id: k.id,
              value: k.id,
              label: k.name,
            })
          }
          children.push({
            id: j.id,
            value: j.id,
            label: j.name,
            children: classChildren
          })
        }
        classTreeList.push({
          id: i.id,
          value: i.id,
          label: i.name,
          children
        })
      }
      this.classTreeList = classTreeList
    })
  },
  methods: {
    resetPassword(id) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      resetStudentPassword(id).then(res => {
        this.$message({
          type: 'success',
          message: res.msg
        })
      }).finally(() => {
        loading.close()
      })
    }
  }
}
</script>

<style scoped>

</style>
